<template>
  <el-menu
    default-active="1"
    background-color="#2f4056"
    text-color="#fff"
    active-text-color="#5FB878"
    class="leftNav"
    :unique-opened="true"
  >
    <el-sub-menu index="1">
      <template #title>文章管理</template>
      <el-menu-item index="1-1"
        ><router-link :to="{ name: 'PassageList' }"
          >文章列表</router-link
        ></el-menu-item
      >
      <el-menu-item index="1-2"
        ><router-link :to="{ name: 'AddPassage' }"
          >添加文章</router-link
        ></el-menu-item
      >
      <el-menu-item index="1-3"
        ><router-link :to="{ name: 'PassageTypeList' }"
          >文章类型列表</router-link
        ></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>活动管理</template>
      <el-menu-item index="2-1"
        ><router-link :to="{ name: 'ActivityList' }"
          >活动列表</router-link
        ></el-menu-item
      >
      <el-menu-item index="2-2"
        ><router-link :to="{ name: 'AddActivity' }"
          >添加活动</router-link
        ></el-menu-item
      >
      <el-menu-item index="2-3"
        ><router-link :to="{ name: 'ActivityTypeList' }"
          >活动类型列表</router-link
        ></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>社团管理</template>
      <el-menu-item index="3-1"
        ><router-link :to="{ name: 'ClubList' }"
          >社团列表</router-link
        ></el-menu-item
      >
      <el-menu-item index="3-2"
        ><router-link :to="{ name: 'AddClub' }"
          >添加社团</router-link
        ></el-menu-item
      >
      <el-menu-item index="3-3"
        ><router-link :to="{ name: 'ClubTypeList' }"
          >社团类型列表</router-link
        ></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>用户管理</template>
      <el-menu-item index="4-1"
        ><router-link :to="{ name: 'UserList' }"
          >用户列表</router-link
        ></el-menu-item
      >
      <!-- <el-menu-item index="4-2"
        ><router-link :to="{ name: 'AddUser' }"
          >添加用户</router-link
        ></el-menu-item
      > -->
      <el-menu-item index="4-3"
        ><router-link :to="{ name: 'UserRoleList' }"
          >用户角色列表</router-link
        ></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>资源管理</template>
      <el-menu-item index="5-1"
        ><router-link :to="{ name: 'FileList', query: { fileTypeId: 3 } }"
          >文件下载</router-link
        ></el-menu-item
      >
      <el-menu-item index="5-2"
        ><router-link :to="{ name: 'CarouselList', query: { fileTypeId: 4 } }"
          >首页轮播图</router-link
        ></el-menu-item
      >
      <el-menu-item index="5-3"
        ><router-link :to="{ name: 'HotActivities', query: { fileTypeId: 6 } }"
          >热门活动</router-link
        ></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="6">
      <template #title>系统管理</template>
      <el-menu-item index="6-1"
        ><a :href="accessFrontUrl" target="_blank"
          >返回系统前台</a
        ></el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const OK = 200;
const accessFrontUrl = ref("http://localhost:8011/");

const getFrontUrl = async () => {
  try {
    const res = await axios.get("/api/system/frontUrl");
    if (res.data.code === OK) {
      accessFrontUrl.value = res.data.data;
    }
  } catch (error) {
    console.error("获取前台URL失败:", error);
  }
};

onMounted(() => {
  getFrontUrl();
});
</script>

<style scoped="scoped">
.leftNav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #2f4056 !important;
  padding-top: 57px;
}
.leftNav .el-menu-item a {
  color: #eee;
  text-decoration: none;
}
.router-link-exact-active.router-link-active {
  font-size: 120%;
  color: #409eff !important;
}
</style>
